<template>
  <div>
    123
  </div>
</template>
<script setup lang="ts">
import { traverseNode } from '@vue/compiler-core';
import {ref, reactive} from 'vue'

interface dataType {
  id: number
  label: string,
  children?: dataType[]
}
const state = reactive({
  data: [{
    id: 1,
    label: '一级 1',
    children: [{
      id: 11,
      label: '二级 1-1',
      children: [{
        id: 111,
        label: '三级 1-1-1'
      }]
    }]
  }, {
    id: 2,
    label: '一级 2',
    children: [{
      id: 22,
      label: '二级 2-1',
      children: [{
        id: 222,
        label: '三级 2-1-1'
      }]
    }, {
      id: 23,
      label: '二级 2-2',
      children: [{
        id: 233,
        label: '三级 2-2-1'
      }]
    }]
  }, {
    id: 3,
    label: '一级 3',
    children: [{
      id: 33,
      label: '二级 3-1',
      children: [{
        id: 334,
        label: '三级 3-1-1'
      }]
    }, {
      id: 34,
      label: '二级 3-2',
      children: [{
        id: 344,
        label: '三级 3-2-1'
      }]
    }]
  }],
})

const traverse = (data: dataType, callback: Function) => {
  if (!data.children) return
  for (let item of data.children) {
    callback(item)
  }
}

const search = (data: dataType, id: number) => {
  const callback = (item: dataType): any => {
    if (item.id !== id) {
      return traverse(item, callback)
    } else {
      console.log(item, '对应值')
      return
    }
  }
  traverse(data, callback)
}

search(state.data[1], 22)

</script>
<style scoped lang="scss">

</style>